<template>
  <div class="project box-centent">
    <div class="nav-box">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>创客集市</el-breadcrumb-item>
        <el-breadcrumb-item>投资机构</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="nav-search">
        <el-input size="mini" placeholder="输入你要找的内容" prefix-icon="el-icon-search" v-model="search"></el-input>
      </div>
    </div>
    <div :class="['classify-box', showMore ? 'show-more' : '']">
      <div class="classify-content">
        <div class="categories">分类:</div>
        <div :class="['list', item.active?'active':'']" v-for="(item, index) in categories" :key="index" @click="changeCategories(item)">{{item.name}}</div>
      </div>
      <div class="classify-more" @click="showMore = !showMore">更多</div>
    </div>
    <div class="item">

      <div class="list" v-for="(item ,index) in 20" :key="index">
        <router-link :to="{name: 'investment_institutions_details'}">
          <div class="show">
            <el-image style="width: 180px; height: 153px; " :src="url"></el-image>
          </div>
          <div class="ascription">
            <div class="title">领创资本</div>
            <div><i class="iconfont icon-xin"></i>广州</div>
          </div>
          <div class="msg">
            <div class="msg-title">关注领域：</div>
            <div class="msg-content">互联网、互金、移动互···</div>
          </div>
          <div class="msg">
            <div class="msg-title">偏好投资阶段:</div>
            <div class="msg-content">种子轮、A轮</div>
          </div>

          <!-- <div class="detail">拥有8年Office企业培训经验。2009-2013连续五年荣获MVP（微软专家）称号、MCT（微软认证讲师）、MCITP（微软认证信息技术专家）MCP（微软认证专家）MCSE（微软认证系统工程师）CNP(思科认证网络专家)。</div> -->
        </router-link>
      </div>

    </div>
    <div class="block">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage1" :page-size="10" layout="prev, pager, next, total" :total="100" background pager-count="10" hide-on-single-page>
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      showMore: false,
      search: '',
      categories: [
        { name: '全部', type: 0, active: true },
        { name: '电商', type: 1, active: false },
        { name: '互联网', type: 2, active: false },
        { name: '农牧业', type: 3, active: false },
        { name: '金融', type: 4, active: false },
        { name: '新能源', type: 5, active: false },
        { name: '文化创意', type: 6, active: false },
        { name: '交通运输', type: 13, active: false },
        { name: '动漫电影', type: 7, active: false },
        { name: '动漫电影', type: 8, active: false },
        { name: '动漫电影', type: 9, active: false },
        { name: '动漫电影', type: 10, active: false },
        { name: '动漫电影', type: 11, active: false }
      ],
      url:
        'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
    }
  },
  methods: {
    changeCategories (category) {
      this.categories.forEach(item => {
        if (item.type === category.type) {
          item.active = true
        } else {
          item.active = false
        }
      })
    },
    goMore () {
      this.$router.push('/investment_institutions_details')
    }
  }
}
</script>

<style lang="scss" scoped>
.project {
  .nav-box {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 18px 0;
    /deep/.el-breadcrumb {
      flex: 1;
    }
    .nav-search {
      display: flex;
      align-items: center;
      /deep/ .el-input {
        width: 85%;
        .el-input__inner {
          border-radius: 12px;
          height: 21px;
          line-height: 21px;
          padding-left: 15px;
          background: #f5f7ff;
        }
      }
      /deep/ .el-input__prefix {
        left: 115px;
        .el-icon-search {
          line-height: 21px;
        }
      }
    }
  }

  .classify-box {
    display: flex;
    align-items: flex-start;
    background: rgba(255, 255, 255, 1);
    border-radius: 8px;
    padding: 16px 28px 0px 32px;
    height: 33px;
    overflow: hidden;
    transition: all 0.5s;
    position: relative;
    .classify-content {
      flex: 1;
      display: flex;
      align-items: flex-start;
      flex-wrap: wrap;
      .categories {
        margin-right: 52px;
        margin-bottom: 18px;
        font-size: 18px;
        color: rgba(6, 17, 37, 1);
        font-weight: 500;
      }
      .list {
        margin-right: 52px;
        margin-bottom: 18px;
        font-size: 18px;
        color: rgba(51, 69, 102, 1);
        cursor: pointer;
        &.active {
          background-color: rgba(210, 231, 255, 1);
          color: rgba(46, 141, 246, 1);
        }
      }
    }
    .classify-more {
      font-size: 18px;
      color: rgba(51, 69, 102, 1);
      width: 60px;
      text-align: center;
    }
    &.show-more {
      height: auto;
    }
    &::before {
      content: "";
      position: absolute;
      top: 50px;
      left: 32px;
      right: 28px;
      border-bottom: 1px dashed #d4cdcd;
    }
  }
  .item {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .list {
      margin-top: 30px;
      padding: 30px 12px 18px 12px;
      background: #fff;
      border-radius: 12px;
      position: relative;
      .show {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        color: rgba(51, 69, 102, 1);
        .name {
          font-size: 16px;
          color: rgba(19, 35, 64, 1);
          margin-top: 24px;
          font-weight: 500;
        }
        .line {
          width: 88px;
          height: 3px;
          background: linear-gradient(
            135deg,
            rgba(42, 148, 255, 1) 0%,
            rgba(140, 109, 255, 1) 100%
          );
          margin: 16px 0;
        }
      }
      .ascription {
        display: flex;
        align-items: center;
        font-size: 12px;
        color: rgba(104, 115, 136, 1);
        margin-top: 15px;
        .title {
          flex: 1;
          font-size: 12px;
          color: #333;
        }
      }
      .msg {
        margin-top: 10px;
        display: flex;
        align-items: center;
        font-size: 14px;
        color: rgba(19, 35, 64, 1);
        .msg-title {
          margin-right: 5px;
          color: red;
        }
        .msg-content {
          width: 127px;

          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
      .detail {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        padding: 18px 18px 0 18px;
        font-size: 16px;
        line-height: 28px;
        background: linear-gradient(
          135deg,
          rgba(42, 148, 255, 1) 0%,
          rgba(140, 109, 255, 1) 100%
        );
        border-radius: 12px;
        color: #fff;
        transition: all 0.5s;
      }
      &:hover {
        .detail {
          display: block;
        }
      }
    }
  }
  /deep/.block {
    padding: 32px 0 48px;
    .el-pagination {
      display: flex;
      align-items: center;
      justify-content: center;
      .el-pagination__total {
        float: right;
      }
    }
    .btn-prev,
    .btn-next {
      border-radius: 14px;
      background: rgba(148, 148, 148, 0.5);
      .el-icon {
        color: #606266;
      }
    }
    .number {
      border-radius: 14px;
      background: none;
    }
    .btn-next {
      border-radius: 14px;
      background: rgba(148, 148, 148, 0.5);
      .btn-next:disabled {
        color: #333;
      }
    }
  }
}
</style>
